<template>
<div class="app">
  <el-breadcrumb
    separator-class="el-icon-arrow-left"
    style="margin-right: 30px;position:absolute;right:0;ub main-center cross-center"
  >
    <el-breadcrumb-item :to="{ path: '/' }">库房设置</el-breadcrumb-item>
    <el-breadcrumb-item>中心库房</el-breadcrumb-item>

    <el-breadcrumb-item>配送中心</el-breadcrumb-item>
  </el-breadcrumb>

      <!-- <el-input class="input" placeholder="库房名字" v-model="queryInfo.query"></el-input>
      <el-button class="btn1" slot="append" icon="el-icon-search" type="primary" @click="chaxun">库房名字查询</el-button> -->
   <!-- 查询信息的表单 -->
  <el-form ref="form" :model="form" label-width="150px">
      <!-- <el-input class="input" placeholder="库房名字" v-model="form.name"></el-input>
      <el-button class="btn1" type="primary" @click="chaxun">库房名字查询</el-button> -->

       <el-input clearable class="input" placeholder="库房name" v-model="form.name" @clear="chaxun1"></el-input>
      <el-button  class="btn1" type="primary" @click="chaxun" icon="el-icon-search">库房名字查询</el-button>

      <el-button class="btn1" type="primary" @click="dialogFormVisible = true">增加库房</el-button>
      <!-- <el-button class="btn1" type="primary" @click="dialogFormVisible1 = true">修改库房</el-button> -->
      <el-input class="input" placeholder="库房id" v-model="form3.id" clearable @clear="chaxun1"></el-input>
      <el-button class="btn1" type="primary" @click="delWarehouse">删除库房</el-button>
  </el-form>

    <!-- 增加库房 -->
    <el-dialog style="width:1200px;text-align:center;" title="增加库房" :visible.sync="dialogFormVisible">
  <el-form :model="form2" ref="form2" :rules="rules">
    <el-form-item label="供应库房地址" style="margin-top:10px;" :label-width="formLabelWidth" prop="address">
      <el-input class="input1" v-model="form2.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="库房最大储量" style="margin-top:10px;" :label-width="formLabelWidth" prop="maximumWarehouse">
      <el-input class="input1" v-model="form2.maximumWarehouse" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="库房名称" style="margin-top:10px;" :label-width="formLabelWidth" prop="name">
      <el-input class="input1" v-model="form2.name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button class="btn2" @click="dialogFormVisible = false">取 消</el-button>
    <el-button class="btn2" type="primary" @click="dialogFormVisible = false;addWarehouse()">确 定</el-button>
  </div>
</el-dialog>

 <!-- 修改库房 -->
    <el-dialog style="width:1200px;text-align:center;" title="修改库房" :visible.sync="dialogFormVisible1">
  <el-form :model="form3" :rules="rules1" ref="form3">
    <el-form-item label="库房id" style="margin-top:10px;" :label-width="formLabelWidth" prop="id">
      <el-input class="input1" v-model="form3.id" autocomplete="off" disabled=""></el-input>
    </el-form-item>
    <el-form-item label="供应库房地址" style="margin-top:10px;" :label-width="formLabelWidth" prop="address">
      <el-input class="input1" v-model="form3.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="库房最大储量" style="margin-top:10px;" :label-width="formLabelWidth" prop="maximumWarehouse">
      <el-input class="input1" v-model="form3.maximumWarehouse" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="库房名称" style="margin-top:10px;" :label-width="formLabelWidth" prop="name">
      <el-input class="input1" v-model="form3.name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button class="btn2" @click="dialogFormVisible1 = false">取 消</el-button>
    <el-button class="btn2" type="primary" @click="dialogFormVisible1 = false;updateWarehouse()">确 定</el-button>
  </div>
</el-dialog>
    <!-- 表格 -->
  <el-table
    ref="filterTable"
    v-loading="loading"
    :data="wareset"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
       <el-table-column type="index" label="#" style="width: 4%"></el-table-column>
    <el-table-column
      prop="id"
      label="库房id"
      sortable
      style="width:6%"
      column-key="id"
      :filters="[{text: '01', value: '01'}, {text: '02', value: '02'}, {text: '03', value:'03'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '05', value: '05'}, {text: '06', value: '06'}]"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="库房名称"
      style="width: 10%">
    </el-table-column>
    <el-table-column
      prop="address"
      label="库房地址"
      style="width: 10%">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
      style="width: 10%">
    </el-table-column>
    <el-table-column
      prop="maximumWarehouse"
      label="库房最大储量"
      style="width: 10%">
    </el-table-column>
    <el-table-column
      prop="updateTime"
      label="更新时间"
      style="width: 10%">
    </el-table-column>
    <el-table-column label="操作" style="width:100px">
      <template slot-scope="scope">
        <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
        <el-button icon="el-icon-edit" style="padding:10px;" type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
        <el-button icon="el-icon-delete" style="padding:10px;" size="mini" type="danger"  @click="handleDelete(scope.row)">删除</el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
   <div class="block">
    <el-pagination
      @size-change="handleSizeChange"   
      @current-change="handleCurrentChange" 
      :current-page="pageNum" 
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total"> 
</el-pagination>
</div>
</div>
</template>

<script>
export default {
  data() {
    return{
      loading:true,
      total: 0,
      pageNum: 1,
      pageSize: 5,
       queryInfo: {
        query:'',
        type: 3,
        pageNum: 1,
        pageSize: 2,
      },
      formLabelWidth: '120px',
      wareset:[],
      form:{
        name:'',
        id:''
      },
      form2:{//增加
        address:'',
        maximumWarehouse:'',
        name:''
      },
      form3:{//修改
        address:'',
        id:'',
        maximumWarehouse:'',
        name:''
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      delid:'',
      rules:{
        address: [
            { required: true, message: '请输入库房地址', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
        maximumWarehouse: [
            { required: true, message: '请输入库房最大储量', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
        name: [
            { required: true, message: '请输入库房名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ]
      },
      rules1:{
        address: [
            { required: true, message: '请输入库房地址', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
        maximumWarehouse: [
            { required: true, message: '请输入库房最大储量', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
        name: [
            { required: true, message: '请输入库房名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
        id: [
            { required: true, message: '请输入库房id', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  methods:{
    //分页显示库房页面
    async chaxun() {
      if(this.form.name == ""){
        return this.$message.error("查询条件不能为空")
      }else{
        this.loading = true
        const {data:res} = await this.$http.get('/api/send/getWarehouse?pageNum='+this.pageNum+'&pageSize='+this.pageSize,{
        params:{
          'name':this.form.name
        }
      })
      if(res.code == 200){
          console.log("通过name查询")
          console.log(res)
          let wareset = res.data
          this.total = res.total
          console.log(wareset)
          console.log("成功2")
          this.wareset = wareset
          this.loading = false
      }else{
        return this.$message.error(res.msg)
      }
      }
      
    },
     async chaxun1() {
       this.loading = true
      const {data:res} = await this.$http.get('/api/send/getWarehouse?pageNum='+this.pageNum+'&pageSize='+this.pageSize)
      if(res.code == 200){
          console.log("通过name查询")
          console.log(res)
          let wareset = res.data
          this.total = res.total
          console.log(wareset)
          console.log("成功2")
          this.wareset = wareset
          this.loading = false
      }else{
        return this.$message.error(res.msg)
      }
    },
    //根据id查询库房
    async searchById() {
      const{data:res} = await this.$http.get('api/send/getWarehouseById',{
        params:{
          'id':this.form.id
        }
      })  
        console.log("id查询")
        console.log(res)
        let wareset = res.data
        console.log(wareset)
        console.log("成功2")
        this.wareset = wareset
    },
    //新增库房
    async addWarehouse() { 
      const {data:res} = await this.$http.post('/api/send/addWarehouse',{
        'address':this.form2.address,
        'maximumWarehouse':this.form2.maximumWarehouse,
        'name':this.form2.name
      }) 
      if(res.code == 200){ 
        console.log("新增库房")
        console.log(res)
        console.log(res.data) 
        this.wareset.push({     
          address:this.form2.address,
          maximumWarehouse:this.form2.maximumWarehouse,
          name:this.form2.name
        })
        this.chaxun1()
      }else{
        return this.$message.error(res.msg)
      }
    },
    //更改库房
    async updateWarehouse(forName) {
     
      this.dialogFormVisible1 = false
      console.log(forName)
      const {data:res} = await this.$http.post('/api/send/updateWarehouse',{
        'address':this.form3.address,
        'id':this.form3.id,
        'maximumWarehouse':this.form3.maximumWarehouse,
        'name':this.form3.name
      }) 
      if(res.code == 200){
        console.log("更改库房")
        console.log(res)
        console.log(res.data) 
        this.$set(this.wareset,this.form3.index,{
          address:this.form3.address,
          id:this.form3.id,
          maximumWarehouse:this.form3.maximumWarehouse,
          name:this.form3.name
        })
        this.chaxun1()
      }else{
        return this.$message.error(res.msg)
      }
    },
    //删除库房
    async delWarehouse() {
      const{data:res} = await this.$http.get('/api/send/deleteWarehouse',{
        params:{
          'id':this.form3.id
        }
      })
      this.chaxun1()
       if(res.code == 200){
        console.log("删除库房")
        console.log(res)
        console.log(res.data)
        this.chaxun1()
       }else{
         return this.$message.error(res.msg)
       }
    },
     handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.chaxun1();
    },
    /* 页面数发送改变的时候 */
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.chaxun1();
    },
    handleEdit(index, row) {
        this.dialogFormVisible1 = true
        this.form3 = Object.assign({},row)
        this.form3.index = index
      },
      handleDelete(row) {
        this.$confirm("此操作将删除该供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          const { data: res } =  this.$http.get(
             `/api/send/deleteWarehouse?id=${row.id}`);
             console.log(res);
          // if(res.code === 200){
          //   console.log("删除供应商");
          // // this.getSupplier1() 
          //   }else{
          //     return this.$message.error(res.msg)
          //   }
            this.$message({
            type: 'success',
            message: '删除成功!'
            });
            
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    this.chaxun1() 
       
      },
  },
  created () {
    this.chaxun1()
  }
};
</script>

<style scoped>
*{
  margin: 0px auto;
  padding: 0px;
}
.input{
  width: 150px;
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
}
/* .btn1{
  width: 120px;
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
} */
.btn1 {
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  background-color: rgb(32, 178, 170);
}

.btn1:hover {background-color:rgb(32, 178, 170);}

.btn1:active {
  background-color: rgb(32, 178, 170);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.btn2{
  text-align: center;
  width: 120px;
  height: 40px;
  margin-left: 160px;
  padding: 10px;
}
.input1{
  margin-top: 10px;
  width: 400px;
}
</style>